<template>
    <div>
        <div class="user_info">
						<div v-if="showUserInfoList=='finApproveDetail' || showUserInfoList=='finApproval'">
							<p class="info_title">基本资料</p>
							<ul class="user_info_list">
							    <li><span class="item_title">单据日期 </span><span class="item_info">{{userInfo.fd_payoutlist_date}}</span></li>
							    <li><span class="item_title">归属部门 </span><span class="item_info">{{userInfo.fd_department_name}}</span></li>
							    <li><span class="item_title">公司 </span><span class="item_info">{{userInfo.company_name}}</span> </li>
							    <li><span class="item_title">报销事由 </span><span class="item_info">{{userInfo.fd_payoutlist_memo}}</span></li>
							    <li><span class="item_title">费用标签名称 </span><span class="item_info">{{userInfo.fee_tag_name}}</span></li>
							    <li><span class="item_title">报销项目金额 </span><span class="item_info">{{userInfo.fd_payoutlist_allmoney}}</span></li>
							    <li><span class="item_title">实际报销金额 </span><span class="item_info">{{userInfo.fd_actualities_money}}</span></li>
							</ul>
						</div>
						<div v-if="showUserInfoList=='reimbursement'">
							<p class="info_title">当前报销情况</p>
							<ul class="user_info_list">
							    <li><span class="item_title">发起总笔数 </span><span>{{userInfo.apply_count}}</span></li>
							    <li><span class="item_title">审批中总笔数 </span><span>{{userInfo.approval_count}}</span></li>
							    <li><span class="item_title">通过总笔数 </span><span>{{userInfo.complete_count}}</span> </li>
							    <li><span class="item_title">通过总金额 </span><span>{{userInfo.total_money}}</span></li>
							    <li><span class="item_title">实发总金额 </span><span>{{userInfo.total_actualities_money}}</span></li>
							</ul>
						</div>
        </div>
    </div>
</template>
<script>
import { profile } from "@/request/api.js";
export default {
    name:'UserInfo',
    props:{
        fromPage:{
            type:Boolean,
            default:false
        },
        userInfo:{
            type:Object,
            default:{}
        }
    },
    data(){
        return{
            showUserInfoList:'',
            show:false,
            startPosition:0,
            telIcon:require('@/assets/images/tel_icon.png'),
            pic:require('@/assets/images/morentouxiang.png'),
						baseInfo:{},
        }
    },
    mounted(){
        // console.log(this.$router.history.current.name);
        this.showUserInfoList = this.$router.history.current.name;
				
				// this.tel = 'tel:'+this.userInfo.tel;
				// let staffer_id = this.$store.state.staffer_id;
				// 获取员工的基本资料
				// profile({token:this.$store.state.token,fd_sta_id:staffer_id}).then(res=>{
				//     let list = res;
				//     this.baseInfo = list.data.staffer;
				// 		//localStorage.setItem('user_profile',this.baseInfo);
				// }).catch(error=>{
				//     console.log(error)
				// });
				// this.$parent.getprofile();
    },
    methods:{
        bigImage(index){
            this.show = true;
            this.startPosition = index;
        },
        onChange(index) {
            this.index = index;
        },
        //调用原生的电话
        callPhone(phone){
            console.log(phone)
            this.$bridge.registerhandler('takePhone', (phone, responseCallback) => {
                // 处理返回数据
                alert('JS Echo called with:', phone)  
                responseCallback(phone)
            })
        },
    }
}
</script>
<style lang="less" scoped>
.user_info{
    width: 100%;
    height: auto;
    padding: 10px 15px;
    box-sizing: border-box;
    background: #fff;
    margin: 5px auto;
    .user_info_base{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        overflow: hidden;
        border-bottom: 1px solid #f5f5f5;
        img{
            display: block;
            width: 70px;
            height: 70px;
        }
        .user_pic{border-radius: 50%;}
        ul{
            height: auto;
            padding-left: 20px;
            box-sizing: border-box;
            overflow: hidden;
            flex: 3;
            li{
                width: 100%;
                height: 25px;
                font-size: 14px;
                color: #151617;
                a{
                    float: right;
                    img{width: 15px;height: 15px;}
                }
            }
            .uesr_name{font-size: 15px;font-weight: bold;}
        }
    }
		.m-t-10 {
			margin-top: 10px;
		}
}
.info_title {
	padding: 10px 0;
	color: #151617;
	font-size: 14px;
	font-weight: bold;
}
.user_info_list{
		width: 100%;
		height: auto;
		// padding: 20px 0;
		box-sizing: border-box;
		font-size: 13px;
		li{
				width: 100%;
				display: flex;
				align-items: center;
				padding: 5px 0;
				box-sizing: border-box;
				span{margin-left: 30px;}
				.upload_images{
						display: inline-block;
						color: #151617;
						margin-left: 30px;
						flex: 3;
				}
				.upload_images img{width: 42px; display: block;float: left;margin-right: 10px;}
				.item_title{
						margin-left: 0;
						text-align: right;
						color: #999;
						width: 90px;
						font-size: 13px;
				}
				.item_info {
					width: calc(100% - 90px);
					height: auto;
					word-break:break-all;
				}
		}
}

</style>